﻿@{
    ViewData["Title"] = "文件管理";
}
<div class="layui-layout layui-layout-admin">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <label class="layui-form-label">文件名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="fileName" autocomplete="off" class="layui-input">
                    </div>
                    <label class="layui-form-label">开始时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="startTime" autocomplete="off" class="layui-input">
                    </div>
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="endTime" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn" lay-submit lay-filter="btnsearch">
                            <i class="layui-icon layui-icon-search"></i> 查询
                        </button>
                    </div>
                </div>
            </form>

            <button type="button" class="layui-hide" id="upload-file"></button>
            <table id="lsttable" lay-filter="lsttable"></table>
            <script type="text/html" id="toolbar">                
                <button class="layui-btn layui-btn-sm" lay-event="upload">
                    <i class="layui-icon layui-icon-upload-drag"></i> 上传文件
                </button>
            </script>
            <script type="text/html" id="bar">
                <a class="layui-btn layui-btn-xs" lay-event="down">
                   <i class="layui-icon layui-icon-download-circle"></i>
                </a>
                <a class="layui-btn layui-btn-xs" lay-event="edit">
                   <i class="layui-icon layui-icon-edit"></i>
                </a>
                <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">
                   <i class="layui-icon layui-icon-close"></i>
                </a>
            </script>
        </div>
    </div>
</div>

@section scripts {
    <script type="text/javascript">
        var app = {};
        layui.use(['tools', 'toast', 'http'], function () {
            var $ = layui.$, form = layui.form, upload = layui.upload,
                http = layui.http, table = layui.table,
                toast = layui.toast,
                tools = layui.tools;

            app.init = function () {
                //
                form.on('submit(btnsearch)', function (data) {
                    console.log(data.field)
                    table.reload('lsttable', {
                        where: data.field
                    })
                    return false;
                });
                //
                app.uploadIns = upload.render({
                    elem: '#upload-file',
                    url: '/api/sysFile/uploadFile',
                    accept: 'file',
                    done: function (res) {
                        toast.success({ message: '上传成功！' });
                        table.reload('lsttable');
                    }
                });
                //
                let cols =
                    [[
                        { checkbox: true, fixed: true },
                        { title: '名称', field: 'fileName' },
                        {
                            title: '后缀', field: 'suffix', align: 'center', width: 160, templet: function (d) {
                                return '<span class="layui-badge layui-bg-blue">' + d.suffix + '</span>';
                            }
                        },
                        { title: '大小(Kb)', field: 'sizeKb', width: 120 },
                        {
                            title: '预览', field: 'url', align: 'center', width: 160, templet: function (d) {
                                return '<img style="height:32px;width:32px" src="' + d.url + '"></span>';
                            }
                        },
                        { title: '存储位置', field: 'bucketName', width: 150 },
                        { title: '存储标识', field: 'id', width: 150 },
                        { title: '操作', toolbar: '#bar', align: 'right', width: 160 }
                    ]];
                //
                tools.PageTable({ url: '/api/sysFile/page', cols });
                table.on('toolbar(lsttable)', function (obj) {
                    var id = obj.config.id;
                    var checkStatus = table.checkStatus(id);
                    switch (obj.event) {
                        case 'upload':
                            app.upload();
                            break;
                    };
                });
                table.on('tool(lsttable)', function (obj) {
                    var data = obj.data;
                    switch (obj.event) {
                        case 'edit':
                            layer.prompt({ title: '新名称', value: data.fileName }, function (txt, index) {
                                data.fileName = txt;
                                http.post('/api/sysFile/update', data).then((res) => {
                                    if (res.code == 200) {
                                        layer.close(index);
                                        table.reload('lsttable');
                                        toast.success({ message: '保存成功！' });
                                    }
                                    else {
                                        layer.alert('保存失败，错误信息' + res.message, { icon: 2 });
                                    }
                                })
                            });
                            break;
                        case 'del':
                            app.del(data.id);
                            break;
                        case 'down':
                            window.open(data.url);
                            break;
                    };
                });
            }();
            //
            app.upload = function (obj) {
                $('#upload-file').trigger('click');
            }
            app.del = function (id) {
                var index = layer.confirm('您确定要删除当前项吗？', function () {
                    http.post('/api/sysFile/delete', { id }).then((res) => {
                        if (res.code == 200) {
                            layer.close(index);
                            table.reload('lsttable');
                            toast.success({ message: '删除成功！' });
                        }
                        else {
                            layer.alert('删除失败，错误信息' + res.message, { icon: 2 });
                        }
                    })
                });
            }
        })
    </script>
}
